<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@taglib prefix="" uri="" %>--%>
<html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    var pageNo1=1;
    var pageNo=1;
    var pageSize=2;
    var pages=0;

    $(function () {
        pageList(pageNo, pageSize);
        // 查询还未出租的房子
        $("#addemps").click(function () {
            $.ajax({
                url: "/myweb/rent/getHouse",
                type: "get",
                data: {},
                async: false,
                dataType: "json",
                success: function (data) {

                    var html = ""
                    $.each(data, function (i, n) {
                        html += '<option value="' + n.hId + '">' + n.hAddress + '</option>'
                    })
                    $("#hAddress").html(html)
                }
            })

        })
        //查找所租客
        $("#addemps").click(function () {
            $.ajax({
                url: "/myweb/rent/getLessee",
                type: "get",
                data: {},
                async: false,
                dataType: "json",
                success: function (data) {

                    var html = ""
                    $.each(data, function (i, n) {
                        html += '<option value="' + n.lId + '">' + n.lName + '</option>'
                    })
                    $("#lName").html(html)
                }
            })

        })

        //添加租户信息
        $("#addEmp").click(function () {
            // if (!validate_add_form()){
            //     return false;
            // }
            // if ($("#addEmp").attr("ajax-va")=="error"){
            //     $("#empAddModal").modal('hide')
            //     alert("添加失败 用户名非法");
            //
            //     return false;
            // }

            $.ajax({
                url: "/myweb/rent/insert",
                type: "get",
                data: {
                    "hId": $("#hAddress").val(),
                    "lId": $("#lName").val(),
                    "rMoney": $("#money_add_input").val(),
                    "rRemark": $("#beizu_add_input").val(),
                    "rTime": $("#time_add_input").val()
                },
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data != 0) {
                        //关闭模态窗口
                        $("#empAddModal").modal('hide')
                        //重写分页查询
                        pageList(1, pageSize)
                        //清空模态窗口
                        $("#deptList").val("")
                        $("#empName_add_input").val("")
                        $("#email_add_input").val("")
                        $(".gender").val("")
                        alert("添加成功");
                    }

                }
            })

        })

        //更新租户信息
        $("#updateEmp").click(function () {
            // alert( $("#empId").val())
            // alert($(".updategender:checked").val())
            alert(123)
            $.ajax({
                url: "/myweb/rent/update",
                type: "get",
                data: {
                    "rId": $("#empId").val(),
                    "hAddress": $("#houseName_update_input").val(),
                    "lName": $("#zuhu_update_input").val(),
                    "rMoney": $("#rmoney_update_input").val(),
                    "rRemark": $("#remark_update_input").val(),
                    "rTime": $("#time_update_input").val()
                },
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data == 3) {
                        //关闭模态窗口
                        $("#empUpdateModal").modal('hide')
                        //清空表格信息
                        // $("#empUpdateModal")
                        //重写查询
                        pageList(pageNo, pageSize)
                        alert("修改成功");
                    }
                }
            })


        })


        //    校验用户姓名的合法性
        $("#empName_add_input").change(function () {
            // alert(123)
            var empName = this.value;
            $.ajax({
                url: "/myweb/emp/checkEmpName",
                type: "get",
                data: {
                    "empName": empName
                },
                async: false,
                dataType: "json",
                success: function (data) {
                    if (!data.success) {
                        $("#empName_add_input").next("span").text("用户名可用")
                        $("#addEmp").attr("ajax-va", "success")
                    } else {
                        $("#empName_add_input").next("span").text("用户名不可用")
                        $("#addEmp").attr("ajax-va", "error")
                    }
                }
            })


        })


        $("#gjz").keydown(function (event) {
            if(event.keyCode==13){
                mohu(1,pageSize)

            }})



    })


    //    模糊查询
    function mohu(pageNo,pageSize) {
        $.ajax({
            url: "/myweb/rent/getRentLikeAll",
            type: "get",
            data: {
                "like": $("#gjz").val(),
                "pageNo":pageNo,
                "pageSize":pageSize
            },
            async: false,
            dataType: "json",
            success: function (data) {

                var html="";

                $.each(data.list,function (i,n) {
                    html+='<tr>';
                    html+='<td>'+n.rid+'</td>';
                    html+='<td>'+n.house.hAddress+'</td>';
                    html+='<td>'+n.lessee.lName+'</td>';
                    html+='<td>'+n.rmoney+'</td>';
                    html+='<td>'+n.rtime+'</td>';
                    html+='<td>'+n.rremark+'</td>';
                    html+='<td>';
                    html+='<button type="button" class="btn btn-success" onclick="delete1('+n.rid+')" >删除</button>';
                    html+='</td>';
                    html+='<td>';
                    html+='<button type="button" class="btn btn-success"  onclick="update('+n.rid+')" >修改</button>';
                    html+='</td>';
                    html+='</tr>';
                })

                $("#tbody").html(html);


                var navpages=data.navigatepageNums;
                $("#first").html('<a onclick="pointPage('+navpages[0]+')">'+navpages[0]+'</a>')
                $("#second").html('<a onclick="pointPage('+navpages[1]+')">'+navpages[1]+'</a>')
                $("#three").html('<a onclick="pointPage('+navpages[2]+')">'+navpages[2]+'</a>')
                $("#four").html('<a onclick="pointPage('+navpages[3]+')">'+navpages[3]+'</a>')
                // 总页数
                $("#pages").html('<a href="#">总页数:'+data.pages+'</a>')
                //总页数
                pages=data.pages
                //    当前显示信息的页数
                pageNum = data.pageNum;


            }


        })

    }


    //分页查询
    function pageList(pageNo,pageSize) {
        $.ajax({
            url: "/myweb/rent/getAll",
            type: "get",
            data: {
                "pageNo":pageNo,
                "pageSize":pageSize
            },
            async:false,
            dataType: "json",
            success: function (data) {
                var html="";

                $.each(data.list,function (i,n) {
                    html+='<tr>';
                    html+='<td>'+n.rid+'</td>';
                    html+='<td>'+n.house.hAddress+'</td>';
                    html+='<td>'+n.lessee.lName+'</td>';
                    html+='<td>'+n.rmoney+'</td>';
                    html+='<td>'+n.rtime+'</td>';
                    html+='<td>'+n.rremark+'</td>';
                    html+='<td>';
                    html+='<button type="button" class="btn btn-success" onclick="delete1('+n.rid+')" >删除</button>';
                    html+='</td>';
                    html+='<td>';
                    html+='<button type="button" class="btn btn-success"  onclick="update('+n.rid+')" >修改</button>';
                    html+='</td>';
                    html+='</tr>';
                })

                $("#tbody").html(html);

                var navpages=data.navigatepageNums;
                $("#first").html('<a onclick="pointPage('+navpages[0]+')">'+navpages[0]+'</a>')
                $("#second").html('<a onclick="pointPage('+navpages[1]+')">'+navpages[1]+'</a>')
                $("#three").html('<a onclick="pointPage('+navpages[2]+')">'+navpages[2]+'</a>')
                $("#four").html('<a onclick="pointPage('+navpages[3]+')">'+navpages[3]+'</a>')
                // 总页数
                $("#pages").html('<a href="#">总页数:'+data.pages+'</a>')
                //总页数
                pages=data.pages
                //    当前显示信息的页数
                pageNum = data.pageNum;
            }

        });
    }
    //显示点击的那一页数据
    function pointPage(pageNo){
        alert(pageNo)
        if($("#gjz").val()!=null){
            mohu(pageNo,pageSize);
        }else
        {pageList(pageNo,pageSize);}
    }
    //删除操作
    function delete1(rId){
        $.ajax({
            url: "/myweb/rent/delete",
            type: "get",
            data: {
                "rId":rId
            },
            async:false,
            dataType: "json",
            success: function (data) {
                if (data){
                    alert("删除成功")
                    //   重写查询删除后的数据
                    pageList(pageNo,pageSize)
                }
            }
        })

    }

    //    下一页
    function nextPage() {
        if ($("#gjz").val() != null) {
            pageNo1=pageNum+1
            if (pageNo1 >= pages) {
                pageNo1 = pages;
            }
            mohu(pageNo1, pageSize);
        } else{
            pageNo = pageNum + 1
        if (pageNo >= pages) {
            pageNo = pages;
        }
        pageList(pageNo, pageSize)
    }
    }
    //    上一页
    function prePage() {
        if ($("#gjz").val() != null) {
        pageNo1=pageNum-1
        if (pageNo1<=1){
            pageNo1=1;
        }
        mohu(pageNo1,pageSize)
        } else {
        pageNo=pageNum-1
        if (pageNo<=1){
            pageNo=1;
        }
        pageList(pageNo,pageSize)
    }}
    //    首页
    function firstPage() {
        if ($("#gjz").val() != null) {
            mohu(1,pageSize)
        }else {
        pageList(1,pageSize)}
    }
    //    末页
    function endPage() {
        if ($("#gjz").val() != null) {
          mohu(pages,pageSize)
        }else {
            pageList(pages,pageSize)}
    }




    //    校验邮箱和用户名
    function validate_add_form(){
        $("#empName_add_input").parent().removeClass("has-success has-error");
        $("#email_add_input").parent().removeClass("has-success has-error");
        //1.拿到要校验的数据
        var empName=$("#empName_add_input").val();
        var regName=/^[a-zA-Z0-9_-]{6,16}$/;
        if(!regName.test(empName)){
            //alert("用户名异常");
            $("#empName_add_input").parent().addClass("has-error");
            $("#empName_add_input").next("span").text("用户名需要是6-16位");

            return false;
        }else{
            $("#empName_add_input").parent().addClass("has-success");
            $("#empName_add_input").next("span").text("");
        }
        //校验邮箱
        var email=$("#email_add_input").val();
        var regEmail=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        if(!regEmail.test(email)){
            // alert("邮箱格式异常");
            //清空之前的样式
            $("#email_add_input").parent().addClass("has-error");
            $("#email_add_input").next("span").text("邮箱格式不正确");
            return false;
        }else{
            $("#email_add_input").parent().addClass("has-success");
            $("#email_add_input").next("span").text("");
        }
        return true;
    }


    //根据要修改的员工信息进行查询,显示在模态窗口中
    function update(rId) {
        $.ajax({
            url: "/myweb/rent/selectOneByRId",
            type: "get",
            data: {
                "rId": rId
            },
            async: false,
            dataType: "json",
            success: function (data) {
                $("#empId").val(data.rid)
                $("#houseName_update_input").val(data.house.hAddress)
                $("#zuhu_update_input").val(data.lessee.lName)
                $("#rmoney_update_input").val(data.rmoney)
                $("#remark_update_input").val(data.rremark)
                $("#time_update_input").val(data.rtime)
                $("#empUpdateModal").modal('show')


            }
        })
    }

</script>
<head>
    <title>Title</title>
</head>
<body>

<%--模糊查询--%>

<div style="margin-left: 1150px">
        <div class="form-group">
            <input type="text" name="likes" id="gjz" class="form-control" placeholder="请输入关键字进行查询">
        </div>


</div>
<table class="table table-striped">

    <thead>
    <tr>
        <td>编号</td>
        <td>房屋地址名</td>
        <td>租户名</td>
        <td>租金</td>
        <td>出租时间</td>
        <td>备注</td>
        <td>
            <button type="button" class="btn btn-success">操作</button>
        </td>
        <td>
            <button type="button" class="btn btn-success"  data-toggle="modal"  data-target="#empAddModal" id="addemps">添加</button>
        </td>
    </tr>
    </thead>

    <tbody id="tbody">

    </tbody>
</table>



<nav aria-label="Page navigation">
    <ul class="pagination" id="page_ul">
        <li id="firstPage" onclick="firstPage()">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">首页</span>
            </a>
        </li>
        <li id="prePage"><a  onclick="prePage()">上一页</a></li>
        <li id="first"><a href="#">1</a></li>
        <li id="second"><a href="#">2</a></li>
        <li id="three"><a href="#">3</a></li>
        <li id="four"><a href="#">4</a></li>

        <li id="nextPage" onclick="nextPage()"><a>下一页</a></li>
        <li id="endPage" onclick="endPage()">
            <a href="#" aria-label="Next">
                <span aria-hidden="true">末页</span>
            </a>
        </li>
        <li id="pages"><a href="#">总页数:${pages}</a></li>
    </ul>
</nav>
<%--新增模态窗口--%>
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加租房记录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">房屋地址</label>
                        <div class="col-sm-10">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="dId" id="hAddress">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="dId" id="lName">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">创建时间</label>
                        <div class="col-sm-10">
                            <input type="datetime-local" name="empName" class="form-control" id="time_add_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">房屋费</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="money_add_input" placeholder="2000">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <input type="text" name="text" class="form-control" id="beizu_add_input" placeholder="xxxx">
                            <span class="help-block"></span>

                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="addEmp" ajax-va="error">Save changes</button>
            </div>
        </div>
    </div>
</div>
<%--修改模态窗口--%>
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改租户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <input type="hidden" id="empId" >

                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">房屋地址名</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="houseName_update_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">租户名</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="zuhu_update_input" placeholder="email@qq.com">
                            <span class="help-block"></span>

                        </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">租金</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="rmoney_update_input" placeholder="email@qq.com">
                            <span class="help-block"></span>

                        </div>
                    </div>

                    <div class="form-group">

                        <label class="col-sm-2 control-label">出租时间</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="time_update_input" placeholder="">
                            <span class="help-block"></span>
                        </div>
                    </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-10">
                                <input type="text" name="rRemark" class="form-control" id="remark_update_input" placeholder="email@qq.com">
                                <span class="help-block"></span>

                            </div>
                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="updateEmp" ajax-va="error">Update</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
